<template>
  <Card title="通话登记" line>
    <FormContainer :column="4" :disabled="visible">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item prop="buyer" label="顾客ID">
          <el-input v-model.trim="formData.buyer" placeholder="请输入顾客ID" clearable />
        </el-form-item>
        <el-form-item prop="pcode" label="订单编号">
          <el-input v-model.trim="formData.pcode" placeholder="请输入订单编号" clearable />
        </el-form-item>
        <el-form-item prop="callOnlinePlatformCode" label="电商平台">
          <el-select v-model="formData.callOnlinePlatformCode" remote :remote-method="getPlatformInfo" placeholder="请选择电商平台" clearable filterable @change="platformHandle">
            <el-option v-for="(p,i) in platformList" :key="i" :value="p.code" :label="p.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="callOnlineShopCode" label="电商店铺">
          <el-select v-model="formData.callOnlineShopCode" remote :remote-method="getStoreInfo" placeholder="请选择电商电铺" clearable filterable @change="shopHandle">
            <el-option v-for="(p,i) in shopList" :key="i" :value="p.code" :label="p.name" />
          </el-select>
        </el-form-item>
        <el-form-item prop="content" label="内容备注" :span="24">
          <el-input v-model="formData.content" type="textarea" :autosize="{minRows:4}" placeholder="请输入内容备注" clearable />
          <p class="input-tip">剩余{{ count }}字</p>
        </el-form-item>
        <el-form-item>
          <Button type="primary" @click="confirmHandle">保存通话</Button>
          <Button type="primary" @click="resetForm">重置</Button>
        </el-form-item>
      </el-form>
    </FormContainer>
  </Card>
</template>
<script>
import Card from '@/components/Card'
import FormContainer from '@/components/FormContainer'
import { deepCopy, json2FormData } from '@/utils'
// import { ccDict } from '@/api/dataDict'
import { getPlatformInfoB2CECO, getStoreInfoB2CECO } from '@/api/mscInfo'
import { putCreate } from '@/api/telRecord'
export default {
  name: 'DisplayShopCallReg',
  components: {
    Card,
    FormContainer
  },
  inject: ['closePage', 'checkClosePage', 'createdTelRecordHandle'],
  props: {
    orderData: {
      type: Object,
      default: () => ({})
    },
    callTel: {
      type: String,
      default: ''
    },
    callid: {
      type: String,
      default: ''
    },
    recordId: {
      type: String,
      default: ''
    }
  },
  data() {
    const validatorContent = (r, v, c) => {
      if (v.length <= 0) {
        c(new Error('请输入内容备注'))
        return
      } else if (v.length > 150) {
        c(new Error('最多输入150个字符'))
        return
      }
      c()
    }
    return {
      formData: {
        buyer: '', // 顾客昵称
        pcode: '', // 订单编号
        callOnlinePlatformCode: 'vip', // 平台编号
        callOnlinePlatformName: '唯品会', // 平台名称
        callOnlineShopCode: 'MPSTORE', // 电商店铺
        callOnlineShopName: '唯品会成都全友电子商务有限公司', // 电商店铺名称
        content: '' // 内容备注
      },
      formRules: {
        // buyer: [{ required: true, message: '输入顾客昵称', trigger: 'change' }],
        // pcode: [{ required: true, message: '请输入订单编号', trigger: 'change' }],
        // callOnlinePlatformCode: [{ required: true, message: '请选择电商平台', trigger: 'change' }],
        // callOnlineShopCode: [{ required: true, message: '请选择电商店铺', trigger: 'change' }],
        content: [
          { required: true, message: '请输入内容备注', trigger: 'change' },
          { required: true, validator: validatorContent, trigger: 'change' }
        ]
      },
      // 电商店铺
      shopList: [],
      // 平台列表
      platformList: [],
      visible: false
    }
  },
  computed: {
    count() {
      const l = 150 - this.formData.content.length
      return l < 0 ? 0 : l
    }
  },
  watch: {
    orderData(v) {
      const set = this.$set.bind(this, this.formData)
      set('pcode', v.pcode || v.saleOrderCode)
      set('buyer', v.buyer)
      set('callOnlinePlatformCode', v.platCode)
      set('callOnlinePlatformName', v.platName)
      set('callOnlineShopCode', '')
      set('callOnlineShopName', '')

      const filtersRaw = [{ id: 'platformCode', value: v.platCode, property: 'platformCode', operator: 'like' }]
      const data = json2FormData({
        filtersRaw: JSON.stringify(filtersRaw)
      })

      this.getStoreInfo(data).then(res => {
        for (const item of res) {
          if (item.code === this.orderData.storeCode) {
            set('callOnlineShopCode', item.code)
            break
          }
        }
      })
      set('callOnlineShopName', v.storeName)
    }
  },
  created() {
    this.getPlatformInfo()
    this.getStoreInfo('唯品会成都全友电子商务有限公司')
  },
  methods: {
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
      this.getStoreInfo('唯品会成都全友电子商务有限公司')
    },
    // 确认提交
    confirmHandle() {
      this.createdTelRecordHandle().then(() => {
        this.saveHandle()
      })
    },
    // 保存通话
    saveHandle() {
      return this.$refs.form.validate().then(() => {
        const data = deepCopy(this.formData)
        data.nickname = data.buyer
        delete data.buyer
        data.callOrderCode = data.pcode
        delete data.pcode
        data.id = this.recordId
        return putCreate(data).then(res => {
          this.$message.success('保存成功！')
          this.$emit('refresh', 'save')
          // 隐藏按钮
          this.visible = true
          // 关闭弹屏
          this.checkClosePage({ isSaveOther: true })
        })
      })
    },
    // 平台发生变化
    platformHandle(v) {
      for (const p of this.platformList) {
        if (p.code === v) {
          this.$set(this.formData, 'callOnlinePlatformName', p.name)
          break
        }
      }
      this.shopList = []
      this.$set(this.formData, 'callOnlineShopName', '')
      this.$set(this.formData, 'callOnlineShopCode', '')
      this.getStoreInfo('')
    },
    // 平台店铺发生变化
    shopHandle(v) {
      for (const s of this.shopList) {
        if (s.code === v) {
          this.$set(this.formData, 'callOnlineShopName', s.name)
          break
        }
      }
    },
    // 获取平台信息
    getPlatformInfo(v) {
      const data = {
        name: v
      }
      getPlatformInfoB2CECO(data).then(res => {
        this.platformList = res.data.records
        this.shopList = []
      })
    },
    // 获取店铺信息
    getStoreInfo(v) {
      // const data = {
      //   name: v,
      //   platformCode: this.formData.callOnlinePlatformCode
      // }
      // console.log('getStoreInfo', v)
      const filtersRaw = [
        { id: 'name', 'value': Object.keys(v).length === 0 ? '' : v, property: 'name', 'operator': 'like' },
        { id: 'platformCode', value: this.formData.callOnlinePlatformCode, property: 'platformCode', operator: 'like' }
      ]
      const data = json2FormData({
        filtersRaw: JSON.stringify(filtersRaw)
      })
      return getStoreInfoB2CECO(data).then(res => {
        this.shopList = res.data.records
        return res.data.records
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
